<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>打印拣货单</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        var index = 0;
        try
        {
            index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        }
        catch(err)
        {
            //在此处理错误
        }
        $(function () {

            $("#number").focus();
            var number = $("#number").val();
            if (number != '') {
                getGoodsList(number);
            }

            //扫码表单提交事件
            $("#getGoodsForm").submit(function () {
                var number = $("#number").val();
                if (number == '') {
                    $("#record-tips").html("请输入拣货单号");
                    return false;
                } else {
                    //AJAX查询是否存在
                    getGoodsList(number);

                    return false;
                }
            })

            //确认拣货完成
            $("#s-define").click(function () {

                var number = $("#pickNumber").val();
                alert('未实现');
                //AJAX更新成已拣货
                // $.ajax({
                //     url: "/ajax_stock_out/complete_picking",
                //     type: "POST",
                //     dataType: "json",
                //     contentType: "application/json",
                //     data: JSON.stringify({key: number}),
                //     success: function (res) {
                //         // console.log("生成拣货单");
                //         console.log(res);
                //         if (res.code == 0) {
                //             alert("拣货完成");
                //             parent.layer.close(index);
                //             parent.location.reload();
                //         } else {
                //             alert(res.msg);
                //         }
                //     }
                // });
            })

            function getGoodsList(number) {
                $.ajax({
                    url: "/ajax_stock_out/get_picking_goods_by_no",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({key: number}),
                    success: function (res) {
                        console.log(res);
                        if (res.code == 0) {
                            $("#pickNumber").val(number);
                            $("#record-tips").html("");
                            $("#record-tips").hide();
                            var html = '';
                            for (var i = 0; i < res.data.length; i++) {
                                html += '<tr>\n' +
                                    '                <td >' + (i+1) +'</td>\n' +
                                    '                <td style="text-align: left"><span>' + res.data[i].goodsName +'</span>【<span>'+ res.data[i].colorValue+' ' + res.data[i].sizeValue + ' '+ res.data[i].styleValue +'</span>】</td>\n' +
                                    '                <td >' + res.data[i].skuNumber +'</td>\n' +
                                    '                <td> ' + res.data[i].quantity + '</td>\n' +
                                    '                <td> ' + res.data[i].orderNum + '</td>\n' +
                                    '                <td> ' + res.data[i].shelfName + '</td>\n' +
                                    '            </tr>';
                            }
                            $("#r-list").html(html);
                            $("#goods_list").show();
                        } else {
                            $("#r-list").html("");
                            $("#goods_list").hide();
                            $("#record-tips").show();
                            $("#record-tips").html("没有找到该拣货单");
                        }

                        // $("#code").val("");

                        // alert(JSON.stringify(res));
                    }
                });
            }
        })
    </script>
</head>
<body>

<style type="text/css">
    .record-box2 {
        position: relative;
        width: 700px;
        padding: 0 5px 20px;
        font-size: 13px;
        color: #787878;
    }

    .record-box2 h2 {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 40px;
    }

    .record-input, .record-tips {
        width: 320px;
        margin: 0 auto;
        text-align: left;
    }

    .record-input input {
        width: 400px;
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        padding: 14px 9px;
        border: 1px solid #787878;
    }

    .record-tips {
        padding: 5px 0;
        color: #f00;
        font-size: 13px;
        line-height: 2;
    }

    .record-list {
        margin: 0 auto;
        /*max-height: 300px;*/
        width: 600px;
        overflow-y: auto;
    }

    .record-list table {
        width: 100%;
    }

    .record-list th, .record-list td {
        padding: 5px 0;
        font-size: 13px;
        text-align: center;
        border: 1px solid #787878;
    }

    .record-list th {
        background: #f2f2f2;
        font-weight: normal;
    }

    .record-list p {
        text-align: center;
        padding: 20px 0;
    }

    .record-list p a {
        display: inline-block;
        padding: 0 30px;
        height: 30px;
        line-height: 30px;
        background-color: #c33;
        color: #fff;
        text-align: center;
        font-size: 14px;
    }

    .record-list p a:hover {
        background-color: #B23131;
    }
</style>
<div class="record-box2">
    <h2>请扫描拣货单条形码</h2>
    <div class="record-input">
        <form id="getGoodsForm">
            <input type="text" name="code" id="number" th:value="${pick.stockOutNo}" onclick="this.value=''"
                   autocomplete="off"/>
            <input type="hidden" id="pickNumber" value=""/>
        </form>
    </div>
    <div class="record-tips" id="record-tips" style="display: none;"></div>
    <div class="record-list" id="goods_list">
        <table>
            <thead>
            <tr>
            <tr>
                <th>序号</th>
                <th>商品</th>
                <th>SKU</th>
                <th>数量</th>
                <th>对应订单号</th>
                <th>拣货仓位</th>
            </tr>
            </tr>
            </thead>
            <tbody id="r-list">

            </tbody>
        </table>
        <p><a href="javascript:;" id="s-define">确认拣货</a></p>
    </div>
</div>

</body>
</html>